<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例</title>

	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
	 crossorigin="anonymous">

</head>

<body>
	<section class="container">
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">默认按钮样式</h5>
			</div>
			<div class="card-body">
				<div class="mb-3">
					<button type="button" class="btn btn-primary">主要</button>
					<button type="button" class="btn btn-secondary">次要</button>
					<button type="button" class="btn btn-success">成功</button>
					<button type="button" class="btn btn-danger">危险</button>
					<button type="button" class="btn btn-warning">警告</button>
					<button type="button" class="btn btn-info">信息</button>
					<button type="button" class="btn btn-light">光</button>
					<button type="button" class="btn btn-dark">黑暗</button>
					<button type="button" class="btn btn-link">链接</button>
				</div>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">镂空按钮</h5>
			</div>
			<div class="card-body">
				<div class="mb-3">
					<button type="button" class="btn btn-outline-primary">主要</button>
					<button type="button" class="btn btn-outline-secondary">次要</button>
					<button type="button" class="btn btn-outline-success">成功</button>
					<button type="button" class="btn btn-outline-danger">危险</button>
					<button type="button" class="btn btn-outline-warning">警告</button>
					<button type="button" class="btn btn-outline-info">信息</button>
					<button type="button" class="btn btn-outline-light">光</button>
					<button type="button" class="btn btn-outline-dark">黑暗</button>
				</div>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">更大或更小的按钮</h5>
			</div>
			<div class="card-body">
				<div class="mb-2">
					<button type="button" class="btn btn-primary btn-lg">按钮加大</button>
					<button type="button" class="btn btn-secondary btn-lg">按钮加大</button>
				</div>
				<div class="mb-2">
					<button type="button" class="btn btn-primary btn-sm">小按钮</button>
					<button type="button" class="btn btn-secondary btn-sm">小按钮</button>
				</div>
				<div class="mb-2">
					<button type="button" class="btn btn-primary btn-lg btn-block">块级 正行按钮</button>
					<button type="button" class="btn btn-secondary btn-lg btn-block">块级 正行按钮</button>
				</div>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">禁用状态按钮</h5>
			</div>
			<div class="card-body">
				<button type="button" class="btn btn-lg btn-primary" disabled>主要按钮</button>
				<button type="button" class="btn btn-secondary btn-lg" disabled>按钮</button>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">按钮组</h5>
			</div>
			<div class="card-body">
				<div class="btn-group" role="group" aria-label="Basic example">
					<button type="button" class="btn btn-secondary">左</button>
					<button type="button" class="btn btn-secondary">中</button>
					<button type="button" class="btn btn-secondary">右</button>
				</div>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">按钮组-垂直</h5>
			</div>
			<div class="card-body">
				<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
					<button type="button" class="btn btn-secondary">按键</button>
					<button type="button" class="btn btn-secondary">按键</button>
					<div class="btn-group" role="group">
						<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
						 aria-expanded="false">落下</button>
						<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
							<a class="dropdown-item" href="#">Dropdown link</a>
							<a class="dropdown-item" href="#">Dropdown link</a>
						</div>
					</div>
					<button type="button" class="btn btn-secondary">按键</button>
					<button type="button" class="btn btn-secondary">按键</button>
					<div class="btn-group" role="group">
						<button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
						 aria-expanded="false">落下</button>
						<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
							<a class="dropdown-item" href="#">Dropdown link</a>
							<a class="dropdown-item" href="#">Dropdown link</a>
						</div>
					</div>
					<div class="btn-group" role="group">
						<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
						 aria-expanded="false">落下</button>
						<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
							<a class="dropdown-item" href="#">Dropdown link</a>
							<a class="dropdown-item" href="#">Dropdown link</a>
						</div>
					</div>
					<div class="btn-group" role="group">
						<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
						 aria-expanded="false">落下</button>
						<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
							<a class="dropdown-item" href="#">Dropdown link</a>
							<a class="dropdown-item" href="#">Dropdown link</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">下拉按钮</h5>
			</div>
			<div class="card-body">
				<div class="dropdown">
					<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
					 aria-expanded="false">
						Dropdown button
					</button>
					<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
					</div>
				</div>
			</div>
		</div>
	</section>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</body>

</html>